<template>
  <div class="head-search">
    <div class="box">
      <span
        style="width: 28px; height: 22px; margin-right: 2px; font-size: 14px"
        >检索</span
      >
      <span style="width: 2px; height: 22px; margin-right: 8px; font-size: 14px"
        >:</span
      >
      <a-input
        v-model:value="query.keyWord"
        placeholder="请输入检索内容"
        style="width: 278px; height: 32px"
        size="small"
        @change="onSearchChange"
      />
    </div>
    <div class="box">
      <span
        style="width: 56px; height: 22px; margin-right: 2px; font-size: 14px"
        >操作时间</span
      >
      <span style="width: 2px; height: 22px; margin-right: 8px; font-size: 14px"
        >:</span
      >
      <a-range-picker
        size="small"
        style="width: 278px; height: 32px"
        :format="dateFormat"
        v-model:value="query.operationTime"
        :presets="rangePresets"
        @change="onSearchChange"
      />
    </div>
    <div class="box">
      <a-button @click="onReset" style="margin-right: 8px">重置</a-button>
      <a-button @click="onSearchChange" type="primary">搜索</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
import {
  useQuery,
  useLoading,
  useDataSourceManager,
} from './provide-context.js'

const dateFormat = 'YYYY-MM-DD'
let rangePresets = ref([
  { label: '近1天', value: [dayjs().add(-1, 'd'), dayjs()] },
  { label: '近3天', value: [dayjs().add(-3, 'd'), dayjs()] },
  { label: '近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
])
let { update } = useDataSourceManager()
let query = useQuery()
let loading = useLoading()
// 查询
function onSearchChange() {
  query.value.current = 1
  if (loading.value) return
  update()
}
// 重置按钮
function onReset() {
  query.value.keyWord = ''
  query.value.operationTime = ''
}
</script>
<style scoped lang="less">
.head-search {
  display: flex;
  flex: 1;
  justify-content: space-between; /* 左右两边的盒子靠边 */
  align-items: center; // 垂直居中
}
.box {
  // width: 20px;
  // height: 20px;
  // background-color: red;
}
</style>
